<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>图片列表</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="image-app" v-cloak>
			<header-app></header-app>
			<div class="icecream1-a1">
				<div class="swiper-contaner icecream111">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item,index) in icecreamList">
							<div class="icecream1-a2 i100">
								<img :src="item.bg_img">
								<img :src="item.mBg">
							</div>
							<div class="icecream1-a3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
								swiper-animate-delay="0.3s">
								<div class="icecream1-a4">{{ item.title }}</div>
								<div class="icecream1-a5 i200">
									<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220801/11da6cd2cc233bb7ac8a187d61b6345c.jpg">
								</div>
								<div class="bt2-a1 a1">
									<div class="bt2-a2 i100">
										<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220801/7c253df2c455d89d7a2f7cd2a2b4bbae.jpg">
										<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220801/608266ec464478ffbce5a96ae29c46de.jpg">
									</div>
									<div class="bt2-a3">
										<div></div>
										<div>read more</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination icecream112"></div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let icecreamList = Vue.ref([])  // 图片列表
					// 获取冰棍系列
					const getIcecreamList = () => {
						requestData('image', {
							// type: 'goods',
							sort: 'sortDesc',
							data_type: 'list',
							category_id: '635353fc16cdb1829c047d20'
						}, (res) => {
							console.log(res)
							icecreamList.value = res
						})
					}
					Vue.onBeforeMount(() => {
						getIcecreamList()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						
					})
					// 监听事件   监听icecreamList
					Vue.watch(icecreamList, () => {
						Vue.nextTick(() => {
							// 元素渲染完成执行swiper初始化
							super666('icecream111', 'icecream112');
							for (var i = 0; i < $('.icecream112').children().length; i++) {
								$('.icecream112').children().eq(i).append('<div></div>');
							}	
						})
					})
					return { icecreamList }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#image-app')
		</script>
	</body>
</html>
